<template>
  <div>
    <div
      class="vpc-network-table content-wrapper el-card el-card__body is-always-shadow"
    >
      <TableComponent
        ref="tableRef"
        :table-list="state.tableData"
        :table-column-info="effectRouteByVpc"
        @updateData="setPageInfo"
        @defaultPageData="setDefaultPage"
      >
      </TableComponent>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref, shallowReactive, watch } from 'vue';
import TableComponent from '@/components/table/TableComponent.vue';
import debounce from 'lodash/debounce';
import { useRouter } from 'vue-router';
import { effectRouteByVpc } from '@/views/simulation/defaultConfig';
import { xtend } from '@/utils/common';
import { instanceToPlain } from 'class-transformer';
import {
  getEffectRouterByVPCApi,
  getRouterConfigByVPCApi,
} from '@/api/topo/simulationApi/vpc';

// vpcID
const vpcID = ref('');

// 节点数据
const props = defineProps({
  vpcNode: null,
});

const router = useRouter();
const tableRef = ref(null);
const pageInfo = ref(null);
const keyword = ref('');
const state = shallowReactive({
  tableData: [],
});

/**
 * 获取生效路由表-VPC网络（防抖）
 * @type {DebouncedFuncLeading<(function(): Promise<void>)|*> | DebouncedFunc<(function(): Promise<void>)|*>}
 */
const getEffectRouteByVpcData = debounce(async () => {
  const searchInfo_ = xtend(instanceToPlain(pageInfo.value));

  return getEffectRouterByVPCApi(vpcID.value, searchInfo_).then(res => {
    if (!(res instanceof Error)) {
      tableRef.value?.setPageInfo({
        total: res.data?.length,
        page: 1,
        pageSize: 9999,
      });
      state.tableData = res.data;
    }
  });
}, import.meta.env.VITE_INPUT_DEBOUNCE_TIME);

// 初始化页数
const setDefaultPage = arg => (pageInfo.value = arg);

const setPageInfo = arg => {
  pageInfo.value = arg;
  getEffectRouteByVpcData();
};

// 监听传递过来的节点数据
watch(
  () => props.vpcNode,
  val => {
    vpcID.value = props.vpcNode.ID;

    if (vpcID.value) {
      getEffectRouteByVpcData();
    }
  },
  { immediate: true },
);

/**
 * 挂载-生命周期
 */
onMounted(() => {});

/**
 * 卸载-生命周期（主要处理清除定时器、解绑操作）
 */
onUnmounted(() => {});
</script>
<style lang="scss" scoped>
.vpc-network-network-search {
  margin-top: 12px;
  position: relative;

  button {
    margin-left: 16px;
  }

  .vpc-network-search {
    top: -10px !important;
  }
}

.vpc-network-table {
  padding-top: 12px;
  height: calc(100vh - 366px) !important;
}

:deep(.paginationclass) {
  display: none;
}
</style>
